---
layout: single
property_name: align-self
---

<section id="align-self" class="property">
  <header class="property-header">
    <nav class="property-links">
        <a class="property-collection" href="{{site.url}}/flexbox/">
          In collection: <strong>flexbox</strong>
        </a>
      <a class="property-links-direct" href="{{site.url}}/property/align-self/" data-property-name="align-self" data-tooltip="Single page for this property">Permalink</a>
      <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="align-self">Share</a>
        <a target="_blank" href="http://caniuse.com/#feat=flexbox" data-tooltip="See on Can I use..." rel="external">Can I use</a>
      <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/align-self" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
    </nav>
    <h2 class="property-name">
      <a href="#align-self"><span>#</span>align-self</a>
    </h2>
    <div class="property-description">
      <p>Works like <code>align-items</code>, but applies only to a <strong>single</strong> flexbox item, instead of <em>all</em> of them.</p>

    </div>

  </header>

    <style type="text/css">.align-self { align-items: center;background: hsl(0, 0%, 95%);display: flex;height: 200px;justify-content: center;padding: 0; }</style>


    <style type="text/css">.align-self .square { height: 50px;margin: 0 2px;width: calc(20% - 4px); }.align-self .square:nth-child(2) { background: #05ffb0;color: #310736; }.align-self .square:nth-child(4) { height: 75px; }.align-self .line { left: 2px;position: absolute;right: 2px; }.align-self .line--default { top: 50%; }.align-self .line--default:before { content: "Items"; }.align-self .line--red:before { content: "Self"; }</style>


    <section class="example">
      <header class="example-header">
        <p class="example-name">
            <code class="example-default" data-tooltip="This is the property's default value">default</code>


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-self: auto;">align-self: auto;</code>
        </p>
        <div class="example-description">
          <p>The target will use the value of <code>align-items</code>.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div align-self " id="align-self-auto"><p class="square square--plum">1</p><p class="square target">Target</p><p class="square square--plum">3</p><p class="square square--plum">4</p><p class="square square--plum">5</p><div class="line line--default"></div><div class="line line--red"></div></div>
        </div>
      </aside>
          <style type="text/css">#align-self-auto{ align-self:auto;}</style>
        <style type="text/css">#align-self-auto .target { align-self: auto; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-self: flex-start;">align-self: flex-start;</code>
        </p>
        <div class="example-description">
          <p>If the container has <code>align-items: center</code> and the <strong>target</strong> has <code>align-self: flex-start</code>, only the target will be at the start of the cross axis.</p>
<p>By default, this means it will be aligned <strong>vertically</strong> at the <strong>top</strong>.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div align-self " id="align-self-flex-start"><p class="square square--plum">1</p><p class="square target">Target</p><p class="square square--plum">3</p><p class="square square--plum">4</p><p class="square square--plum">5</p><div class="line line--default"></div><div class="line line--red"></div></div>
        </div>
      </aside>
          <style type="text/css">#align-self-flex-start{ align-self:flex-start;}</style>
        <style type="text/css">#align-self-flex-start .target { align-self: flex-start; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-self: flex-end;">align-self: flex-end;</code>
        </p>
        <div class="example-description">
          <p>If the container has <code>align-items: center</code> and the <strong>target</strong> has <code>align-self: flex-end</code>, only the target will be at the end of the cross axis.</p>
<p>By default, this means it will be aligned <strong>vertically</strong> at the <strong>bottom</strong>.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div align-self " id="align-self-flex-end"><p class="square square--plum">1</p><p class="square target">Target</p><p class="square square--plum">3</p><p class="square square--plum">4</p><p class="square square--plum">5</p><div class="line line--default"></div><div class="line line--red"></div></div>
        </div>
      </aside>
          <style type="text/css">#align-self-flex-end{ align-self:flex-end;}</style>
        <style type="text/css">#align-self-flex-end .line--red { bottom: 0; }#align-self-flex-end .target { align-self: flex-end; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-self: center;">align-self: center;</code>
        </p>
        <div class="example-description">
          <p>If the container has <code>align-items: flex-start</code> and the <strong>target</strong> has <code>align-self: center</code>, only the target will be at the center of the cross axis.</p>
<p>By default, this means it will be <strong>vertically centered</strong>.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div align-self " id="align-self-center"><p class="square square--plum">1</p><p class="square target">Target</p><p class="square square--plum">3</p><p class="square square--plum">4</p><p class="square square--plum">5</p><div class="line line--default"></div><div class="line line--red"></div></div>
        </div>
      </aside>
          <style type="text/css">#align-self-center{ align-self:center;}</style>
        <style type="text/css">#align-self-center{ align-items: flex-start; }</style>
        <style type="text/css">#align-self-center .line--default { top: 0; }#align-self-center .line--red { top: 50%; }#align-self-center .target { align-self: center; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-self: baseline;">align-self: baseline;</code>
        </p>
        <div class="example-description">
          <p>If the container has <code>align-items: center</code> and the <strong>target</strong> has <code>align-self: baseline</code>, only the target will be at the baseline of the cross axis.</p>
<p>By default, this means it will be aligned along the basline of the text.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div align-self " id="align-self-baseline"><p class="square square--plum">1</p><p class="square target">Target</p><p class="square square--plum">3</p><p class="square square--plum">4</p><p class="square square--plum">5</p><div class="line line--default"></div><div class="line line--red"></div></div>
        </div>
      </aside>
          <style type="text/css">#align-self-baseline{ align-self:baseline;}</style>
        <style type="text/css">#align-self-baseline .line--default { top: 50%; }#align-self-baseline .line--red { top: 30px; }#align-self-baseline .target { align-self: baseline; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="align-self: stretch;">align-self: stretch;</code>
        </p>
        <div class="example-description">
          <p>If the container has <code>align-items: center</code> and the <strong>target</strong> has <code>align-self: stretch</code>, only the target will stretch along the whole cross axis.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div align-self " id="align-self-stretch"><p class="square square--plum">1</p><p class="square target">Target</p><p class="square square--plum">3</p><p class="square square--plum">4</p><p class="square square--plum">5</p><div class="line line--default"></div><div class="line line--red"></div></div>
        </div>
      </aside>
          <style type="text/css">#align-self-stretch{ align-self:stretch;}</style>
        <style type="text/css">#align-self-stretch .line--default { top: 50%; }#align-self-stretch .line--red { display: none; }#align-self-stretch .target { align-self: stretch;height: auto; }</style>
    </section>

</section>
